<template>
  <el-dialog title="指定成员限制" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" append-to-body :close-on-press-escape="false" width="600px">
    <div class="content-big">
      <div class="content-left">
        <div class="title">请选择活动成员</div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="item.value" v-for="(item,index) in userlist"><div class="limitUser"><img src="@/assets/images/limitUser.png"/>{{item.label}}</div></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="content-right">
        <div class="title">指定限制成员</div>
        <div class="limitUser"><img src="@/assets/images/limitUser.png"/>闵雨薇 <i class="el-icon-delete"></i></div>
      </div>
    </div>
    <div class="footer-btn" slot="footer">
      <div class="allSelect"> <el-checkbox v-model="checked">全选</el-checkbox></div>
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>


export default {
  name: 'limitUser',
  components: {},
  data() {
    return {
      checkList: [],//选中的数据
      checked:false,
      userlist: [
        {value: 1, label: '张敏'},
        {value: 2, label: '民雨薇'},
      ],
      form: {
        img: null,//海报二维码
      },
    }
  },
  created() {

  },
  mounted() {
  },
  watch: {},
  methods: {
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  position: relative;


}
::v-deep .el-dialog__body {
  padding: 0px ;
}
.title {
  margin-bottom: 20px;
}
.content-big {
  display: flex;

  .content-left {
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    .el-checkbox {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  }
  .limitUser {
    display: flex;
    align-items: center;
    padding-right: 30px;
    position: relative;
    img{
      width: 40px;
      height: 40px;
      border-radius: 4px;
      margin-right: 10px;
    }
    .el-icon-delete {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
  }
  .content-right {
    width: 280px;
    height: 450px;
    border-left: 1px solid #eee;
    padding: 10px;
  }
}
.allSelect {
  position: absolute;
  left:10px;
  top: 5px;
}
</style>
